{% block sw_cms_element_image_slider %}
<div
    class="sw-cms-el-image-slider"
    :class="outsideNavArrows"
    :style="verticalAlignStyle"
>
    {% block sw_cms_element_image_slider_img %}
    <div
        class="sw-cms-el-image-slider__image-box"
        :class="[displayModeClass, navDotsClass]"
        :style="styles"
    >
        <video
            v-if="activeMedia?.mediaType?.name === 'VIDEO'"
            class="sw-cms-el-image-slider__video"
            :src="activeMedia?.url"
            controls
        >
            {{ $tc('global.sw-media-preview-v2.fallbackVideoTagSupport') }}
        </video>
        <img
            v-else
            class="sw-cms-el-image-slider__image"
            :src="imgSrc"
            alt=""
        >
    </div>
    {% endblock %}

    <template v-if="element.data !== null">
        {% block sw_cms_element_image_slider_nav %}
        <div class="sw-cms-el-image-slider__navigation">
            {% block sw_cms_element_image_slider_nav_dots %}
            <div
                v-if="element.config.navigationDots.value !== null"
                class="sw-cms-el-image-slider__navigation-dots"
                :class="navDotsClass"
            >
                <div class="sw-cms-el-image-slider__navigation-buttons">
                    <template v-if="sliderItems?.length > 0">
                        <div
                            v-for="(sliderItem, index) in sliderItems"
                            :key="index"
                            :class="activeButtonClass(sliderItem.media.url)"
                            class="sw-cms-el-image-slider__navigation-button"
                            role="button"
                            tabindex="0"
                            @click="setSliderItem(sliderItem.media, index)"
                            @keydown.enter="setSliderItem(sliderItem.media, index)"
                        ></div>
                    </template>
                    <template v-else>
                        <div class="sw-cms-el-image-slider__navigation-button is--active"></div>
                        <div class="sw-cms-el-image-slider__navigation-button"></div>
                        <div class="sw-cms-el-image-slider__navigation-button"></div>
                    </template>
                </div>
            </div>
            {% endblock %}

            {% block sw_cms_element_image_slider_nav_arrows %}
            <div
                v-if="element.config.navigationArrows.value !== null"
                class="sw-cms-el-image-slider__navigation-arrows"
                :class="[navArrowsClass, navDotsClass]"
            >
                <mt-icon
                    class="sw-cms-el-image-slider__navigation-button"
                    name="regular-chevron-left"
                    size="24"
                    @click="setSliderArrowItem(-1)"
                />
                <mt-icon
                    class="sw-cms-el-image-slider__navigation-button"
                    name="regular-chevron-right"
                    size="24"
                    @click="setSliderArrowItem(1)"
                />
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </template>

    <template v-else>
        {% block sw_cms_element_image_slider_nav_default %}
        <div class="sw-cms-el-image-slider__navigation">
            <div class="sw-cms-el-image-slider__navigation-arrows is--nav-outside">
                <mt-icon
                    class="sw-cms-el-image-slider__navigation-button"
                    name="regular-chevron-left"
                    size="24"
                />
                <mt-icon
                    class="sw-cms-el-image-slider__navigation-button"
                    name="regular-chevron-right"
                    size="24"
                />
            </div>
        </div>
        {% endblock %}
    </template>
</div>
{% endblock %}
